<script setup>
const props = defineProps({
  page_no: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['handleCurrentChange', 'handleSizeChange'])
// 页码改变
const handleCurrentChange = (page) => {
  emits('handleCurrentChange', page)
}
// 每页数量变化
const handleSizeChange = (pageSize) => {
  emits('handleSizeChange', pageSize)
}
</script>

<template>
  <el-pagination
    v-show="total != 0"
    id="pagination"
    layout="prev, pager, next, ->, total"
    :current-page="page_no"
    :page-size="pageSize"
    :total="total"
    class="pagination"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  >
  </el-pagination>
</template>
<style lang="scss" scoped>
.pagination {
  padding: 10px;
  display: flex;
  align-items: center;
  height: 32px;
  background-color: var(--el-bg-color);
}
</style>
<style lang="scss">
#pagination {
  * {
    font-size: 14px;
  }
  .el-pagination__rightwrapper {
    order: -1;
    justify-content: flex-start;
  }
  .el-input__wrapper {
    height: 28px;
    box-sizing: border-box;
  }
  .el-pagination__editor.el-input {
    display: flex;
    align-items: center;
  }
  .el-select .el-input {
    width: 92px;
  }
}
</style>
